<template>
    <div class="boundedwork">
        <div class="content">
            <div class="c-top">
                <div class="c-list">
                    <div class="c-left">
                        项目名称
                    </div>
                    <div class="c-right">
                        {{userInfo.departsir == 2?userInfo.pdeptname:dataList.projectName}}
                    </div>
                </div>
                <div class="c-list">
                    <div class="c-left">
                        申请单位
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        {{dataList.deptName}}
                    </div>
                </div>
                <div class="c-list">
                    <div class="c-left">
                        高风险作业区域
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        {{dataList.areaName}}
                    </div>
                </div>
                <div class="c-list">
                    <div class="c-left">
                        作业班组
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        {{dataList.FireSquad}}
                    </div>
                </div>
                <div class="c-list">
                    <div class="c-left">
                        作业班长
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        {{dataList.GroupPerson}}
                    </div>
                </div>
                <div class="c-list">
                    <div class="c-left">
                        作业监护人
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        {{dataList.PersonLiable}}
                    </div>
                </div>
                <div class="c-list">
                    <div class="c-left">
                        作业开始日期
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        {{dataList.startDate}}
                    </div>
                </div>
                <div class="c-list">
                    <div class="c-left">
                        作业结束日期
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        <!--<div class="c-select">请选择</div>
                     <img src="../../../../static/images/5.png"  @click="showmsg" >-->

                        {{dataList.endDate}}
                    </div>
                </div>
            </div>

            <!--<div class="c-btn">
             <div class="c-submit">提交</div>

         </div>-->
            <div class="c-bottom">
                <div class="c-title">
                    监护人工作区域已配备设施和设备
                </div>

                <div class="selectcheck"
                     v-for="(item,index) in EquipmentList">
                    <div class="selecticn">
                        <div class="iconnew checked">
                        </div>
                        <div>
                            {{item}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="c-bottom">
                <div class="c-title">
                    作业监护人已完成工作
                </div>

                <div class="selectcheck"
                     v-for="(item,index) in EquipmentList">
                    <div class="selecticn">
                        <div class="iconnew checked">
                        </div>
                        <div>
                            {{item}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="c-bottom">
                <div class="c-title">
                    应急管理
                </div>

                <div class="selectcheck"
                     v-for="(item,index) in ContingencyMangeList">
                    <div class="selecticn">
                        <div class="iconnew checked">
                        </div>
                        <div>
                            {{item}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="btnlist">
                <div class="listtop">
                    <div class="list-t0">
                        受限空间作业前保证做到
                    </div>
                    <div class="list-t1"
                         v-if="!detailflag"
                         @click="showdetail">
                        展开
                    </div>
                    <div class="list-t1"
                         v-if="detailflag"
                         @click="showdetail">
                        收缩
                    </div>
                </div>
                <div class="firstlist">
                    1.监护人和工人穿着合适的个人防护服
                </div>
                <div class="firstlist">
                    2.安排相应的消防和安全知识
                </div>
                <div class="firstlist">
                    3.受限空间内的所有连接均需隔离、拆除
                </div>
                <div v-if="detailflag">
                    <div class="firstlist">
                        4.受限空间内外的所有电气、液压连接全部锁定并贴上标签
                    </div>
                    <div class="firstlist">
                        5.受限空间内不存在放射性危险
                    </div>
                    <div class="firstlist">
                        6.受限空间内空气中的含氧量应为 19.5%～23%
                    </div>
                    <div class="firstlist">
                        7.作业时，操作人员所需的适宜新风量应为 30 m3/h～50m3/h
                    </div>
                    <div class="firstlist">
                        8.工人精神正常、身体健康
                    </div>
                    <div class="firstlist">
                        9.所有呼吸设备均能正常工作
                    </div>
                    <div class="firstlist">
                        10.提供救生索和安全带
                    </div>
                    <div class="firstlist">
                        11.电气设备满足要求
                    </div>
                    <div class="firstlist">
                        12.受限空间内的所有动火作业必须签发动火作业票，并进行作业危险性分析
                    </div>
                    <div class="firstlist">
                        13.现场要配备受过技能培训具有一定的抢救经验的人员。
                    </div>
                </div>

            </div>

            <div class="line"></div>
            <div class="form-section">
                <h3>审批信息</h3>
                <div v-for="(item,index) in ApproveInfo"
                     :key="index"
                     class="list-item">
                    <div class="form-item form-item-style2">
                        <div class="label-title">
                            <label>审批意见</label>
                        </div>
                        <div>
                            <p class="textarea">{{item.Remark}}</p>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批结论</label>
                        </div>
                        <div>
                            <p>{{item.ApproveResult}}</p>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批人</label>
                        </div>
                        <div>
                            <p>{{item.ApprovePersonName}}</p>
                        </div>
                    </div>
                    <div class="line"></div>
                </div>
            </div>
            <!-- <div class="content-show">
                <div class="c-l-l">
                    <div>审批意见</div>
                    <textarea readonly
                              v-model="dataList.ApproveRemark"
                              class="textarea"></textarea>
                </div>
            </div> -->
            <div class="content-show"
                 v-if="syself||mStatus==2">
                <div class="c-l-l">
                    <div>监控意见</div>
                    <textarea v-if="mStatus==1"
                              maxlength="50"
                              v-model="jkdata.MonitoringRemark"
                              placeholder="请输入监控意见"
                              class="textarea"></textarea>
                    <!-- <textarea v-if="mStatus==2"
                              v-model="dataList.MonitoringRemark"
                              disabled
                              class="textarea"></textarea> -->
                    <p v-if="mStatus==2"
                       class="textarea">{{dataList.MonitoringRemark}}</p>
                </div>
            </div>
            <div class="showstyleBox">
                <div class="showstyle"
                     v-if="syself&&mStatus==1">
                    <div class="newqqq">
                        <div class="space-between">
                            <label>监控图片</label>

                        </div>
                        <span>当前共{{uploadLength}}张照片</span>
                    </div>
                    <div class="upload-wrap">
                        <upload @setFormData="setFormData"></upload>
                    </div>
                </div>

                <div class="showstyle"
                     v-if="mStatus==2">
                    <div class="newqqq">
                        <div class="space-between">
                            <label>监控图片</label>

                        </div>
                        <span>当前共{{dataList.MonitoringPath.length}}张照片</span>
                    </div>

                    <!-- <div class="imgshow">
                        <img :src="item"
                            :preview="'preview'"
                            v-for="(item,index) in dataList.MonitoringPath">
                    </div> -->
                    <div class="upload-wrap">
                        <upload v-if="dataList.MonitoringPath&&dataList.MonitoringPath.length>0"
                                :imgList="dataList.MonitoringPath"></upload>
                        <strong v-else
                                class="no-img">暂无图片</strong>
                    </div>
                </div>
            </div>
            <div class="c-top"
                 v-if="syself&&mStatus==1">
                <div class="c-list">
                    <div class="c-left">
                        监控人员
                    </div>
                    <div class="c-right">
                        {{jkdata.MonitoringPeople}}
                    </div>
                </div>
            </div>
            <div class="c-top"
                 v-if="mStatus==2">
                <div class="c-list">
                    <div class="c-left">
                        监控人员
                    </div>
                    <div class="c-right">
                        {{jkdata.MonitoringPeople}}
                    </div>
                </div>
            </div>
            <div class="c-btn"
                 v-if="mStatus==1&&syself">
                <div class="c-submit"
                     @click="submitlist">提交</div>
            </div>
        </div>

        <!--获取区域-->
        <div v-transfer-dom>
            <popup v-model="areaValue"
                   width="100%">
                <div class="position-horizontal-demo"
                     v-for="(item,index) in areaList"
                     :key="index"
                     @click="selectArea(item)">
                    <span class="vux-close">
                        {{item.name}}
                    </span>
                </div>
            </popup>
        </div>
        <myMenu></myMenu>
    </div>
</template>

<script>

import { Popup, TransferDom } from 'vux'
import upload from '@/commonComponents/upload/index'
import myMenu from '@/commonComponents/menu'
import lookcompany from '../weightwork/lookcompany'
import mixin from '../commonmixin.js'
export default {
    name: 'App',
    directives: {
        TransferDom
    },
    mixins: [mixin],
    data () {
        return {
            userInfo: {},
            options1: ['A单位'],
            options2: ['安全类'],
            active: 1,
            showflag: false,
            dataList: {
                id: '', //	String	否	现场危险作业ID
                deptName: '', //	String	否	申请单位名称
                deptId: '', //	String	否	申请单位ID
                startDate: '', //	String	否	作业日期
                personId: '', //	String	否	申请人ID
                personName: '', //	String	否	申请人名称
                areaId: '', //	String	否	作业区域ID
                areaName: '', //	String	否	作业区域名称
                guardian: '', //	String	否	监护人
                floor: '', //	String	否	作业楼层
                workTypes: '', //	String	否	作业类型*（多选，","分隔）
                PlanText: '', //	String	否	分部分项工程名称（可多选，","分隔）
                defenceText: '', //	String	否	防范措施（可多选，","分隔）
                MonitoringPath: []
            },
            jkdata: {
                id: '', //	String	否	起重吊装作业ID
                Monitoring: 'true', //	boolean	否	是否监控
                MonitoringPeople: '', //	String	否	监控人员
                // MonitoringPath:"",//	String	否	监控图片
                MonitoringRemark: '', //	String	否	监控意见
                CheckResult: true
            },
            formData: '',
            images: [],
            uploadLength: 0,
            mStatus: '',

            EquipmentList: [],
            CompletedWorkList: [],
            ContingencyMangeList: [],
            detailflag: false,
            syself: false,
            addflag: true,
            ApproveInfo: []
        }
    },
    components: {
        upload, lookcompany, Popup, myMenu
    },
    computed: {
    },
    watch: {
    },
    created () {
        this.mStatus = this.$route.query.mStatus
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.userId = this.userInfo.userid
        this.tokenId = this.userInfo.tokenId
        this.projectId = this.userInfo.deptid
        this.jkdata.MonitoringPeople = this.userInfo.username
        this.jkdata.id = this.$route.query.id
        // this.syself = this.rolecheck()
        this.getDate()
    },
    methods: {
        showdetail () {
            this.detailflag = !this.detailflag
        },
        rolecheck () {
            // index==1  验证是否是项目施工员  index==2  验证是否是设备管理员
            let arr = []
            let flag = false
            arr = this.userInfo.usermode.split(',')
            arr.forEach(
                (item, index) => {
                    if (item == '项目安全员') {
                        flag = true
                    }
                }
            )
            return flag
        },
        setFormData (formData, uploadLength, images) {
            this.formData = formData
            this.uploadLength = uploadLength
            this.images = images
        },
        showmsg () {

        },
        selectArea (item) {
            //  this.areaname = item.name;
            this.dataList.areaName = item.name
            this.dataList.areaId = item.id
            this.areaValue = false
        },
        getDate () {
            let param = {
                'allowPaging': true,
                'business': 'GetConfinedJob',
                'data': {
                    'id': this.$route.query.id
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    let newarr = res.data.data
                    this.dataList = {
                        id: newarr.Id, //	String		受限空间作业申请ID（修改时存在，新增时为空）
                        projectName: newarr.ProjectName, //	String		项目名称
                        projectId: newarr.projectId, //	String		项目ID
                        deptName: newarr.DeptName, //	String		申请单位名称
                        deptId: newarr.DeptId, //	String		申请单位ID
                        AreaId: newarr.AreaId, //	String		高风险作业区域id
                        areaName: newarr.AreaName, //
                        startDate: newarr.StartDate.substring(0, 10), //	String	否	申请拆除日期
                        endDate: newarr.EndDate.substring(0, 10), //	String	否	计划完工时间
                        FireSquadid: newarr.FireSquadid, //	String		作业班组id
                        FireSquad: newarr.FireSquad, //	String		作业班组
                        GroupPersonid: newarr.GroupPersonid, //	String		作业班长id
                        GroupPerson: newarr.GroupPerson, //	String		作业班长
                        PersonLiableid: newarr.PersonLiableid, //	String		作业监护人id
                        PersonLiable: newarr.PersonLiable, //	String		作业监护人
                        Equipment: newarr.Equipment, //	String		监护人工作区域已配备设施和设备
                        CompletedWork: newarr.CompletedWork, //	String		作业监护人已完成工作
                        ContingencyMange: newarr.ContingencyMange,
                        ApproveRemark: newarr.ApproveRemark,
                        ApplyPerson: newarr.ApplyPerson, //	String		应急管理:
                        MonitoringPath: newarr.MonitoringPath,
                        MonitoringRemark: newarr.MonitoringRemark

                    }
                    // this.subProjectsList = res.data.data.SubProjects;
                    // this.changemove();
                    if (newarr.Equipment) {
                        this.EquipmentList = newarr.Equipment.split(',')
                    }
                    if (newarr.CompletedWork) {
                        this.CompletedWorkList = newarr.CompletedWork.split(',')
                    }
                    if (newarr.ContingencyMange) {
                        this.ContingencyMangeList = newarr.ContingencyMange.split(',')
                    }
                    this.syself = res.data.data.CanEdit
                    this.ApproveInfo = res.data.data.ApproveInfo
                }
            )
        },
        submitlist () {
            if (!this.addflag) {
                return false
            }
            this.addflag = false
            this.$vux.loading.show({
                text: '正在提交中...'
            })
            let param = {
                'allowPaging': true,
                'business': 'ConfinedCheck',
                'data': this.jkdata,
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param, this.formData
            ).then(
                (res) => {
                    if (res.data.code == 0) {
                        // this.$router.push('/workrisk')
                        this.$router.go(-1)
                    } else {
                        this.addflag = true
                    }
                }
            ).catch(
                () => {
                    this.addflag = true
                }
            )
        }

    }
}
</script>

<style scoped lang="less">
.boundedwork {
    background-color: #ebeef3;
    height: 100%;
}
.content {
    background-color: #ebeef3;
}
.c-top {
    background-color: #fff;
    padding-left: 20px;
}
.c-bottom {
    background-color: #fff;
    padding-left: 20px;
    margin-top: 12px;
    font-size: 13px;
}
.c-list {
    padding: 20px 20px 20px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #efeff4;
}
.c-left {
    color: #666;
    font-size: 14px;
    position: relative;
}
.c-left > i {
    position: absolute;
    top: -5px;
    right: -18px;
}
.c-right {
    color: #999;
    font-size: 14px;
    // display:flex;
    align-items: center;
    width: 160px;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.c-select {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    // width:200px;
    margin-right: 6px;
    text-align: right;
}
.c-btn {
    height: 113px;
    padding-top: 32px;
}
.c-submit {
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    border-radius: 20px;
    background-color: #2269ff;
    margin: 0 auto;
}
.c-title {
    height: 50px;
    line-height: 50px;
    color: #1f69fc;
    border-bottom: 1px solid #ebeef3;
}
.selectcheck {
    background-color: #fff;
    // padding-left:20px;
}
.selecticn {
    height: 54px;
    display: flex;
    align-items: center;
}
.iconnew {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #2467ff;
    position: relative;
    margin-right: 10px;
}
.iconnew.checked {
    background-color: #2467ff;
}
.iconnew.checked::before {
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    height: 1.067vw;
    width: 2.133vw;
    position: absolute;
    top: 3px;
    left: 3px;
    content: '';
    -webkit-transform: rotate(-56deg);
    transform: rotate(-51deg);
}
.btnlist {
    background-color: #fff;
    padding-top: 6px;
    padding-left: 25px;
    // border-top: 1px solid #ebeef3;
    border-bottom: 1px solid #ebeef3;
    padding-bottom: 26px;
    font-size: 13px;
}
.listtop {
    height: 56px;
    line-height: 56px;
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
}
.list-t0 {
    color: #666;
    font-size: 14px;
}
.list-t1 {
    color: #999;
    font-size: 14px;
}
.firstlist {
    line-height: 23px;
    color: #999;
    font-size: 14px;
    padding-right: 20px;
}
.c-btn {
    height: 113px;
    padding-top: 32px;
    background-color: #fff;
}
.c-submit {
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    border-radius: 20px;
    background-color: #2269ff;
    margin: 0 auto;
}
.content-show {
    padding-left: 20px;
    background-color: #fff;
}
.c-l-l {
    height: 95px;
    padding-top: 28px;
    padding-right: 20px;
    border-bottom: 1px solid #ebeef3;
}
.c-l-l > div {
    font-size: 14px;
    color: #666;
}
.textarea {
    width: 100%;
    border: 0;
    outline: none;
    margin-top: 10px;
    font-size: 14px;
    color: #999;
}
.newMsg {
    margin-top: 20px;
    padding-right: 20px;
    color: #999;
}
.c-l-ll {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ebeef3;
}
.rightselct {
    display: flex;
}
.tofirst {
    display: flex;
    align-items: center;
    width: 120px;
    height: 55px;
    text-align: center;
}
.selecti {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #999;
    margin-right: 10px;
}
.selecti.active {
    border: 3px solid #226afd;
}
.showstyleBox {
    background-color: #fff;
}
.showstyle {
    padding: 20px 20px 0 0;
    margin-left: 20px;
    font-size: 14px;
    border-bottom: 1px solid #ebeef3;
}
.newqqq {
    display: flex;
    justify-content: space-between;
}
.newqqq label {
    color: #666;
    font-size: 14px;
}
.newqqq span {
    font-size: 14px;
    color: #999;
}
.upload-wrap {
    border-bottom: 1px solid #ebeef3;
}
.imgshow {
    padding: 20px;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
}
.imgshow > img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.boundedwork textarea[disabled='disabled'] {
    background-color: #fff;
}
.line {
    border-bottom: 10px solid #ebeef2;
}
</style>
